<!DOCTYPE html>
<html>

<head>
    <title>倩狐OA办公系统</title>
    <!--#include virtual ="/ui/oa2/inc/head.html"-->
    <script src="/ui/foxUI/libs/daypilot-all.min.js"></script>
</head>

<body>
<div id="app">
    <scheduler id="dp" :config="initConfig" ref="scheduler"></scheduler>
</div>
</body>
<script>
    let vm = {
        data: {
            initConfig: {
                locale: "zh-cn",
                timeHeaders: [
                    {
                        "groupBy": "Day",
                        "format": "dddd, d MMMM yyyy"
                    },
                    {
                        "groupBy": "Hour"
                    },
                    {
                        "groupBy": "Cell",
                        "format": "mm"
                    }
                ],
                scale: "CellDuration",
                cellDuration: 15,
                showNonBusiness: false,
                businessBeginsHour: 8,
                businessEndsHour: 21,
                cellGroupBy: "Week",
                days: 7,
                treeEnabled: 1,
                eventResizeHandling: "Disabled",
                eventMoveHandling: "Disabled",
                startDate: DayPilot.Date.today(),
                onBeforeEventRender: function (args) {
                    args.data.barColor = args.data.color;
                    args.data.areas = [
                        {
                            top: 6,
                            right: 2,
                            icon: "icon-triangle-down",
                            visibility: "Hover",
                            action: "ContextMenu",
                            style: "font-size: 12px; background-color: #f9f9f9; border: 1px solid #ccc; padding: 2px 2px 0px 2px; cursor:pointer;"
                        }
                    ];
                },
                contextMenu: new DayPilot.Menu({
                    items: [
                        {
                            text: "Blue",
                            icon: "icon icon-blue",
                            color: "#1155cc",
                            onClick: function (args) {
                                http.updateColor(args.source, args.item.color);
                            }
                        },
                        {
                            text: "Green",
                            icon: "icon icon-green",
                            color: "#6aa84f",
                            onClick: function (args) {
                                http.updateColor(args.source, args.item.color);
                            }
                        },
                        {
                            text: "Yellow",
                            icon: "icon icon-yellow",
                            color: "#f1c232",
                            onClick: function (args) {
                                http.updateColor(args.source, args.item.color);
                            }
                        },
                        {
                            text: "Red",
                            icon: "icon icon-red",
                            color: "#cc0000",
                            onClick: function (args) {
                                http.updateColor(args.source, args.item.color);
                            }
                        },

                    ]
                })
            }
        },
        computed: {
            scheduler: function () {
                return this.$refs.scheduler.control;
            }
        },
        methods: {
            loadResources: function () {
                var dp = this.scheduler;
                var data = [
                    {
                        name: "H栋", id: DayPilot.guid(), expanded: true, children: [
                            {
                                name: "一楼", id: DayPilot.guid(), expanded: true, children: [
                                    {
                                        name: "1号百人会议室", id: "1"
                                    },
                                    {name: "2号百人会议室", id: "B"},
                                    {name: "3号百人会议室", id: "C"},
                                    {name: "4号百人会议室", id: "D"}
                                ]
                            },
                            {name: "二楼", id: "B"},
                            {name: "三楼", id: "C"},
                            {name: "四楼", id: "D"}
                        ]
                    },
                    {
                        name: "F栋", id: DayPilot.guid(), expanded: true, children: [
                            {
                                name: "Room 1", id: DayPilot.guid(), children: [
                                    {
                                        name: "Room 1", id: "A"
                                    },
                                    {name: "Room 2", id: "B"},
                                    {name: "Room 3", id: "C"},
                                    {name: "Room 4", id: "D"}
                                ]
                            },
                            {name: "Room 2", id: "B"},
                            {name: "Room 3", id: "C"},
                            {name: "Room 4", id: "D"}
                        ]
                    },
                ];
                dp.onBeforeCellRender = function (args) {
                    if (args.cell.start.getDayOfWeek() === 0) {
                        args.cell.backColor = "#d9ead3";
                    }
                };
                dp.update({resources: data});
                // generate and load events
                for (var i = 0; i < 1; i++) {
                    var duration = Math.floor(Math.random() * 6) + 1; // 1 to 6
                    var start = Math.floor(Math.random() * 6) - 3; // -3 to 3
                    var e = new DayPilot.Event({
                        start: new DayPilot.Date("2019-11-06T09:00:00").addHours(start),
                        end: new DayPilot.Date("2019-11-06T12:00:00").addHours(start).addHours(duration),
                        id: DayPilot.guid(),
                        resource: "1",
                        text: "IT中心会议室"
                    });
                    dp.events.add(e);
                }
                for (var i = 0; i < 1; i++) {
                    var duration = Math.floor(Math.random() * 6) + 1; // 1 to 6
                    var start = Math.floor(Math.random() * 6) - 3; // -3 to 3
                    var e = new DayPilot.Event({
                        start: new DayPilot.Date("2019-11-04 09:00:00").addHours(start),
                        end: new DayPilot.Date("2019-11-04 12:00:00").addHours(start).addHours(duration),
                        id: DayPilot.guid(),
                        resource: "D",
                        text: "IT中心会议室"
                    });
                    dp.events.add(e);
                }

            },
            updateColor: function (e, color) {
                var dp = this.scheduler;
                e.data.color = color;
                dp.events.update(e);
                dp.message("Color updated");
            }
        },
        mounted: function () {
            this.loadResources();
        }
    }
</script>
</html>